<template>
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view >
		<view style="display: flex;align-items:baseline;color:#3E91E6;font-size: 28rpx ;padding:40rpx 72rpx;">
			<view style="margin-right: 50rpx;" :class="{'party-rank-tab-active':current==1}" @click="setOrder(1)">
				按解决问题数
			</view>
			<view  :class="{'party-rank-tab-active':current==2}" @click="setOrder(2)">
				按质效评价分
			</view>
		</view>
		<view style="font-size: 32rpx;">
			<view class="party-rank-header">
				<view class="party-rank-column">排名</view>
				<view class="party-rank-column">小组</view>
				<view class="party-rank-column">数量</view>
				<view class="party-rank-column">评分</view>
			</view>
			<view class="party-rank-item" v-for="(item,index) in data" :key="index">
				<view class="party-rank-column">
					<image v-if="index==0" src="../static/img/rank1.png" style="width: 55rpx;height: 55rpx;" mode="">
					</image>
					<image v-if="index==1" src="../static/img/rank2.png" style="width: 55rpx;height: 55rpx;" mode="">
					</image>
					<image v-if="index==2" src="../static/img/rank3.png" style="width: 55rpx;height: 55rpx;" mode="">
					</image>

					<template v-if="index>2">
						{{index+1}}
					</template>
				</view>
				<view class="party-rank-column">
					{{item.name}}
				</view>
				<view class="party-rank-column">
					{{item.problems}}
				</view>
				<view class="party-rank-column">
					{{item.rating.toFixed(1)}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		data() {
			return {
				current:1,
				data: []
			}
		},
		mounted() {
			if (uni.getStorageSync('projId') == 159) {
				 this.data = [
				        { name: "9幢", problems: 8, rating: 4.63 },
				        { name: "10幢", problems: 4+1, rating: 4.5 },
				        { name: "11幢", problems: 4, rating: 4.5 },
				        { name: "12幢", problems: 5, rating: 4.4 },
				      ];
			}
			if (uni.getStorageSync('projId') == 208) {
				 this.data = [
							  { name: "1幢", problems: 3+1, rating: 4.3 },
				              { name: "2幢", problems: 9, rating: 4.6 },
				              { name: "3幢", problems: 5+1, rating: 4.6 },
				              { name: "4幢", problems: 3+1, rating: 4.3 },
				              { name: "5幢", problems: 3+1, rating: 4.7 },
				              { name: "6幢", problems: 4+1, rating: 4.8 },
				              { name: "7幢", problems: 3+1, rating: 4.7 },
				              { name: "8幢", problems: 3+1, rating: 4.7 },
				              { name: "9幢", problems: 4+1, rating: 4.7 },
				              { name: "10幢", problems: 5+1, rating: 4.6 },
				              { name: "11幢", problems: 4, rating: 4.5 },
				              { name: "12幢", problems: 4+1, rating: 4.5 },
				      ];
			}
			this.setOrder(1)
		},
		methods: {
			setOrder(order) {
				this.current = order
				if (order == 1) {
					this.data = this.data.sort((y, x) => x.problems - y.problems)
				} else {
					this.data = this.data.sort((y, x) => x.rating - y.rating)
				}
			}
		}
	}
</script>

<style>
	.party-rank-tab-active{
		color: #333333;
		font-size: 36rpx;
		font-weight: bold;
		position: relative;
		z-index: 1;
	}
	.party-rank-tab-active::before{
		position: absolute;
		content: "";
		width:220rpx ;
		height: 16rpx;
		display: block;
		transform:translate(-5rpx,30rpx) skew(-50deg);
		background-color: #FFD487;
		z-index: -1;
	
	}
	.party-rank-header {
		display: flex;
		height: 80rpx;
		line-height: 80rpx;

	}

	.party-rank-item {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
	}

	.party-rank-item:nth-child(even) {
		background-color: #FFF5E3;
	}

	.party-rank-column {
		flex: 1;
		text-align: center;
	}
</style>
